<template>
  <div class="home-profile" v-if="profile">
    <el-row class="el-h155">
      <el-col :xs="24" :md="12" :lg="4" :xl="4" style="padding: 10px 20px;">
        <a v-if="profile.userGeneral.headImg" target="_blank" :href="profile.userGeneral.headImg" :style="'width: 130px;height: 130px;display: block;background-size: cover;border-radius: 5px;margin: auto;background-image: url('+profile.userGeneral.headImg+')'"></a>
      </el-col>
      <el-col :xs="24" :md="12" :lg="7" :xl="7">
        <div class="ul"><span>中文名稱</span>{{ profile.userGeneral.tcName }}</div>
        <div class="ul"><span>First Name:</span>{{ profile.userGeneral.firstName }}</div>
        <div class="ul"><span>Last Name:</span>{{ profile.userGeneral.lastName }}</div>
        <div class="ul"><span>Gender:</span>{{ profile.userGeneral.gender }}</div>
      </el-col>
      <el-col :xs="24" :md="12" :lg="7" :xl="7">
        <div class="ul"><span>Date of Birth:</span>{{ profile.userGeneral.birthDate | dateFormat }}</div>
        <div class="ul"><span>Age:</span>{{ profile.userGeneral.age }}</div>
        <div class="ul"><span>Contact Number:</span>{{ profile.userGeneral.contactNumber }}</div>
        <div class="ul"><span>Email address:</span>{{ profile.userGeneral.emailAddress }}</div>
      </el-col>
      <el-col :xs="24" :md="12" :lg="6" :xl="6">
        <div class="ul"><span>Emergency Contact:</span>{{ profile.userGeneral.emergencyContact }}</div>
        <div class="ul"><span>Emergency Tel:</span>{{ profile.userGeneral.emergencyTel }}</div>
        <div class="ul"><span>Status:</span>{{ profile.userStatus | userStatusFormat }}
          <el-popover
            placement="bottom"
            width="280"
            trigger="click"
          >
            <el-table :data="profile.statusLogs" max-height="250">
              <el-table-column width="120" property="date" label="End Date" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.recordDate | dateFormat }}</span>
                </template>
              </el-table-column>status
              <el-table-column width="130" property="name" label="Status" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.status === '0' ? 'Active' : ''}}</span>
                  <span>{{ scope.row.status === '1' ? 'Suspended' : ''}}</span>
                  <span>{{ scope.row.status === '2' ? 'Retired' : ''}}</span>
                </template>
              </el-table-column>
            </el-table>
            <i slot="reference" class="el-icon-date text-green" style="margin-left: 10px;" />
          </el-popover>
        </div>
        <div class="ul"><span>Medical Insurance: </span>{{ profile.insurance }}</div>
        <div />
      </el-col>
    </el-row>
    <el-row class="el-h282 el-h250" style="margin-top: 20px;">
      <!--            <el-col :span="4" class="hidden-md-only"/>-->

      <el-col :xs="24" :md="24" :lg="9" :xl="8">
        <div class="ul"><span>Disable:</span>{{ profile.body.disables === 1? 'Yes' : 'No' }}</div>
        <div class="ul"><span>Current sport:</span>{{ profile.body.current }}<el-popover
          placement="bottom"
          width="280"
          trigger="click"
        >
          <el-table :data="profile.currentSportLog" max-height="250">
            <el-table-column width="120" label="End Date" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.recordDate | dateFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column width="130" property="info" label="Sport" align="center"></el-table-column>
          </el-table>
          <i slot="reference" class="el-icon-date text-green" style="margin-left: 10px" />
        </el-popover></div>
        <div class="ul"><span>Sport Classification / Status:</span>{{ profile.body.sportClassification }} / {{ profile.body.sportClassificationStatus }}</div>
        <div class="ul"><span>Since:</span>{{ profile.body.since }}</div>
        <div class="ul" style="white-space: initial;"><span>Remarks:</span><div class="remarks">{{ profile.body.remarks }}</div></div>
      </el-col>
      <el-col :xs="24" :md="12" :lg="6" :xl="6">
        <div class="ul"><span>Type of Disability:</span>{{ profile.body.disableType }}</div>
        <div class="ul"><span>Affecting area:</span>{{ profile.body.affectingArea }}</div>
        <div class="ul"><span>Ambulatory:</span>{{ profile.body.ambulatory }}</div>
        <div class="ul"><span>Preliminary Disability:</span>{{ profile.body.preliminary }}</div>
        <div class="ul"><span>Secondary Disability:</span>{{ profile.body.secondary }}</div>

        <!--              <div class="ul"><span>Position:</span>{{ profile.body.position }}</div>-->
      </el-col>
      <el-col :xs="24" :md="12" :lg="3" :xl="4">
        <div class="ul"><span>Weight(KG):</span>{{ profile.body.weight || profile.body.weigth }}</div>
        <div class="ul"><span>Height(CM):</span>{{ profile.body.height || profile.body.heig}}</div>
        <div class="ul"><span>Blood Type:</span>{{ profile.body.bloodType }}</div>
        <div class="ul"><span>T-Shirt:</span>{{ profile.body.tShirt }}</div>
        <div class="ul"><span>Jacket:</span>{{ profile.body.jacket }}</div>
        <div class="ul"><span>Pants:</span>{{ profile.body.pants || profile.body.pant}}</div>
        <div class="ul"><span>Shoes:</span>{{ profile.body.shoes }}</div>
        <div class="ul"><span>Special Meal:</span>{{ profile.body.specialMeal }}</div>
      </el-col>
      <el-col :xs="24" :md="24" :lg="6" :xl="6">
        <h4 style="margin: 0;">Training Grant</h4>
        <table v-if="profile.body.trainingGrant" class="basic-table" border="0" cellspacing="0" cellpadding="0">
          <thead align="center">
          <tr>
            <th />
            <th>Category</th>
            <th>Support/Month(HK$)</th>
          </tr>
          </thead>
          <tbody align="center">
          <tr v-for="item in profile.body.trainingGrant" :key="item.name">
            <td style="color: #ACB8C8;">{{ item.name }}</td>
            <td>{{ item.category }}</td>
            <td>{{ item.supportMonth }}</td>
          </tr>
          </tbody>
        </table>
        <div v-else style="color: #ACB8C8;margin-top: 10px;margin-left: 20px">No Data</div>
      </el-col>
    </el-row>

    <el-row class="el-h155" style="margin-top:1.66em;">
      <el-col :span="5" :xs="24" :sm="12" :md="12" :lg="5" :xl="5">
        <div class="ul"><span>HK ID no.:</span>{{ profile.userIdentity.hkId }}</div>
        <div class="ul" v-if="profile.userIdentity.issueDate"><span>Issue Date:</span>{{ profile.userIdentity.issueDate | dateFormat}}</div>
        <div class="ul" v-else><span>Issue Date:</span>{{ profile.userIdentity.lssueDate | dateFormat}}</div>
        <div class="ul" v-if="profile.userIdentity.placeIssued"><span>Place of Issue:</span>{{ profile.userIdentity.placeIssued }}</div>
        <div class="ul" v-else><span>Place of Issue:</span>{{ profile.userIdentity.placeLssue }}</div>
        <div class="ul"><span>Date of Issue:</span>{{ profile.userIdentity.hkIssueDate | dateFormat }}</div>
      </el-col>
      <el-col :span="7" :xs="24" :sm="12" :md="12" :lg="7" :xl="7">
        <div class="ul"><span>Place of Birth:</span>{{ profile.userIdentity.placeBirth }}</div>
        <div class="ul" v-if="profile.userIdentity.residedHk"><span>Date of Resided in HK:</span>{{ profile.userIdentity.residedHk | dateFormat }}</div>
        <div class="ul" v-else><span>Date of Resided in HK:</span>{{ profile.userIdentity.resldedHk | dateFormat }}</div>
        <div class="ul"><span class="hide">Date of Resided in HK:</span></div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="ul"><span>Home Permit no.:</span>{{ profile.userIdentity.homePermit }}</div>
        <div class="ul"><span>Expiry Date:</span>{{ profile.userIdentity.homeExpiry | dateFormat }}</div>
        <div class="ul hide"><span>Place of Issue:</span>{{ profile.userIdentity.homePlace }}</div>
        <div class="ul"><span>Date of Issue:</span>{{ profile.userIdentity.homeIssueDate | dateFormat }}</div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="ul"><span>Passport no.:</span>{{ profile.userIdentity.passport }}</div>
        <div class="ul"><span>Expiry Date:</span>{{ profile.userIdentity.passportExpiry | dateFormat }}</div>
        <div class="ul"><span>Country of Passport:</span>{{ profile.userIdentity.passportCountry }}</div>
        <div class="ul"><span>Date of Issue:</span>{{ profile.userIdentity.passportIssueDate | dateFormat }}</div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :xs="24" :md="24" :lg="24" :xl="24">
        <div class="ul"><span>Home Address:</span>{{ profile.userGeneral.enAddress }}</div>
        <div class="ul"><span>中文住址:</span>{{ profile.userGeneral.tcAddress }}</div>
      </el-col>
    </el-row>
    <el-row class="el-h155" style="margin-top:1.66em;">
      <el-col :span="4" class="hidden-md-only hidden-xs-only hidden-lg-only" />
      <el-col :span="7" :xs="24" :sm="12" :md="12" :lg="8" :xl="7">
        <div class="ul"><span>Occupation:</span>{{ profile.userPrivate.occupation }}</div>
        <div class="ul"><span>Company Name:</span>{{ profile.userPrivate.companyName }}</div>
        <div class="ul"><span>Company Address:</span>{{ profile.userPrivate.companyAddress }}</div>
        <div class="ul"><span>Previous Position (SAP):</span>{{ profile.userPrivate.previousPosition }}</div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
        <div class="ul"><span>Position:</span>{{ profile.userPrivate.position }}</div>
        <div class="ul"><span>Name of Employer:</span>{{ profile.userPrivate.employerName }}</div>
        <div class="ul hide"><span>Supervisor Position:</span>{{ profile.userPrivate.supervisorPosition }}</div>
        <div class="ul hide"><span>Bank Details:</span>{{ profile.userPrivate.bankDetails }}</div>
      </el-col>
      <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
        <div class="ul" v-if="profile.userIdentity.governmentDepartment"><span>Government department:</span>{{ profile.userPrivate.governmentDepartment }}</div>
        <div class="ul" v-else><span>Government department:</span>{{ profile.userPrivate.govemmentDepartment }}</div>
        <div class="ul"><span>Leave Letter Request:</span>{{ profile.userPrivate.leaveLetter }}</div>
        <div class="ul"><span>Notes:</span>{{ profile.userPrivate.notes }}</div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :xs="24" :md="24" :lg="24" :xl="24">
        <div class="ul"><span>HKSI Athlete Number:</span>{{ profile.userPrivate.athleteCode }}</div>
        <div class="ul"><span>HKSI SMC Athlete Number:</span>{{ profile.userPrivate.athleteNumber }}</div>
      </el-col>
    </el-row>
    <h2>Position and Qualification</h2>
    <el-table
      v-loading="listLoading"
      :data="profile.positionQualification"
      element-loading-text="Loading"
      max-height="250"
      border
      fit
      highlight-current-row
      stripe
    >
      <el-table-column align="center" label="Period" width="95">
        <template slot-scope="scope">
          {{ scope.row.period }}
        </template>
      </el-table-column>
      <el-table-column label="Organization">
        <template slot-scope="scope">
          {{ scope.row.organization }}
        </template>
      </el-table-column>
      <el-table-column label="機構">
        <template slot-scope="scope">
          {{ scope.row.mechanism }}
        </template>
      </el-table-column>
      <el-table-column label="Position / Qualification">
        <template slot-scope="scope">
          {{ scope.row.profession }}
        </template>
      </el-table-column>
      <el-table-column label="公職 / 資歷">
        <template slot-scope="scope">
          {{ scope.row.seniority }}
        </template>
      </el-table-column>
      <el-table-column label="Remarks">
        <template slot-scope="scope">
          {{ scope.row.remarks }}
        </template>
      </el-table-column>
      <el-table-column label="備註">
        <template slot-scope="scope">
          {{ scope.row.descInfo }}
        </template>
      </el-table-column>
    </el-table>

    <h2>Honours and Awards</h2>
    <el-table
      v-loading="listLoading"
      :data="profile.honoursAwards"
      element-loading-text="Loading"
      max-height="250"
      border
      fit
      highlight-current-row
      stripe
    >
      <el-table-column align="center" label="Year" width="95">
        <template slot-scope="scope">
          {{ scope.row.years }}
        </template>
      </el-table-column>
      <el-table-column label="Organizer">
        <template slot-scope="scope">
          {{ scope.row.organizer }}
        </template>
      </el-table-column>
      <el-table-column label="主辦單位">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column label="Honour / Award">
        <template slot-scope="scope">
          {{ scope.row.reputation }}
        </template>
      </el-table-column>
      <el-table-column label="榮譽 / 獎項">
        <template slot-scope="scope">
          {{ scope.row.prize }}
        </template>
      </el-table-column>
      <el-table-column label="Remarks">
        <template slot-scope="scope">
          {{ scope.row.remarks }}
        </template>
      </el-table-column>
      <el-table-column label="備註">
        <template slot-scope="scope">
          {{ scope.row.descInfo }}
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 20px;">
      <el-col :xs="24" :md="24" :lg="24" :xl="24">
        <div class="ul"><span>Historical Background:</span></div>
        <div class="ul">{{ profile.userGeneral.historicalBackgroud || '-'}}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import store from '@/store'
  import { getInfo, getProfileInfo } from '@/api/user'

  export default {
    components: {
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: null,
        interList: null,
        reminderList: null,
        reminderListQuery: {
          page: 1,
          limit: 25,
          keyword: '',
          sorting: '',
          column: ''
        },
        listQuery: {
          page: 1,
          limit: 25
        },
        listLoading: true,
        activeName: 'Reminder',
        isActiveName: 'Reminder',
        edit: false,
        radio: '1',
        radio1: '1',
        total: 20,
        profile: '',
        gridData: [{
          date: '2019/08/10',
          name: 'Active'
        }, {
          date: '2019/07/22',
          name: 'Suspended'
        }],
        currentSportData: [{
          date: '2019/08/10',
          name: 'Booda'
        }, {
          date: '2019/07/22',
          name: 'Tennis'
        }],
        userType: store.getters.userType,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        const query = this.$route.query
        if (query.member) {
          getInfo({ memberId : query.member }).then(response => {
            if (response.status !== 0) {
              return false
            }
            this.profile = response.result
            this.profile.body = response.result.userBody
            this.listLoading = false
          })
        } else {
          getInfo().then(response => {
            if (response.status !== 0) {
              return false
            }
            this.profile = response.result
            this.profile.body = response.result.userBody
            this.listLoading = false
          })
        }
      }
    }
  }
</script>
